<template>
  <div class="classify-class">
    <el-dialog :visible.sync="dialog" :title="`${title ? title : defaultTitle}编辑`" :before-close="handleClose" width="590px">
      <el-form :model="CategoryCourse" label-width="200px" ref="updateForm">
        <el-form-item label="开启广告图片">
          <el-radio-group v-model="CategoryCourse.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程分类设置">
          <treeselect v-model="CategoryCourse.courseCategory" :multiple="false" :options="courseCategorys"/>
        </el-form-item>
        <el-form-item label="自定义名称">
          <el-input v-model="CategoryCourse.name"/>
        </el-form-item>
        <el-form-item label="数量设置">
          <el-select v-model="CategoryCourse.num" value="">
            <el-option
              v-for="item in nums"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="课程分类数量设置">
          <el-select v-model="CategoryCourse.courseCategoryNum">
            <el-option
              v-for="item in courseCategoryNums"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序设置">
          <el-select v-model="CategoryCourse.seq">
            <el-option
              v-for="item in seqs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="背景颜色设置">
          <el-radio-group v-model="CategoryCourse.backgroundColor">
            <el-radio label="gray">灰色</el-radio>
            <el-radio label="white">白色</el-radio>
            <el-radio label="default">默认</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updateData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {updateCategoryCourse1Data} from '@/api/system/information_manage';
  import {getCategoryList} from '@/api/subject/category'
  import {getTenantId} from "@/utils/auth"

  export default {
    components: {Treeselect},
    props: {
      dialog: {
        type: Boolean,
        default: false
      },
      defaultTitle: {
        type: String,
        default: ''
      },
      dialogData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        courseCategorys: [],
        nums: [{
          label: '4',
          value: '4'
        },
          {
            label: '8',
            value: '8'
          },
          {
            label: '12',
            value: '12'
          }],
        courseCategoryNums: [{
          label: '2',
          value: '2'
        },
          {
            label: '3',
            value: '3'
          },
          {
            label: '4',
            value: '4'
          }],
        seqs: [{
          label: '最新',
          value: '最新'
        },
          {
            label: '最热',
            value: '最热'
          },
          {
            label: '推荐',
            value: '推荐'
          }]
      }
    },
    computed: {
      CategoryCourse() {
        return this.dialogData
      },
      title() {
        return this.CategoryCourse.name
      }
    },
    mounted() {
      this.getCourseCategorys()
    },
    methods: {
      getCourseCategorys() {
        getCategoryList('course', getTenantId(),'0').then(response => {
          console.log(response.data.items)
          this.courseCategorys = response.data.items
        }).catch(() => {
        })
      },
      updateData() {
        this.$refs['updateForm'].validate((valid) => {
          if (valid) {
            // delete this.CategoryCourse.courseCategory.parent
            // delete this.CategoryCourse.courseCategory.children
            updateCategoryCourse1Data(this.CategoryCourse).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.$emit('categorycourse1submit');
            })
          }
        })
      },
      handleClose() {
        this.$emit('categorycourse1close')
      },
      handleSubmit() {
        this.$emit('categorycourse1submit')
      }
    }
  }
</script>

<style lang="scss">
  .classify-class {
    .el-input {
      width: 200px;
    }
  }
</style>
